import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { getOrderWarranty } from '@/api/user'

import './index.scss'
interface State {
  list: any
  page: number
  isTotal: boolean
}

export default class Index extends Component {

  constructor (props) {
    super(props)
    this.state = {
      list: [],//质保列表
      page: 1,//当前页数
      isTotal: false,// 是否可以继续下拉
    }
  }

  state: State

  // 监听用户下拉刷新事件
  onPullDownRefresh() {
    this.setState({
      list: [],//质保列表
      page: 1,//当前页数
      isTotal: false
    }, () => {
      // 获取质保列表
      this.getOrderWarranty()
    })
  }

  UNSAFE_componentWillMount() { }
  componentDidMount() {
    // 获取质保列表
    this.getOrderWarranty()
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }

  // 获取质保列表
  async getOrderWarranty() {
    const { list, page, isTotal } = this.state
    if (!isTotal) {
      await getOrderWarranty({ query: { "filter": { "and": [] }, "perPage": 20, "page": page } }).then((res) => {
        Taro.stopPullDownRefresh()
        const { data: { data } } = res
        const total = res.header['X-Pagination-Total-Count']
        const newList = list.length == 0 ? data : [...list, ...data]
        this.setState({
          list: newList,
          page: page + 1,
          isTotal: newList.length >= total ? true : false
        })
      }).catch(() => {
        Taro.stopPullDownRefresh()
      })
    }
  }

  // 设置时间格式
  dateFormat(val) {
    const time = new Date(Number(val + '000'))
    return `${time.getFullYear()}年${this.completion(time.getMonth() + 1)}月${this.completion(time.getDate())}日`
  }

  //补0
  completion(val) {
    if (val < 10) {
      return '0' + val
    } else {
      return val
    }
  }

  onReachBottom() {
    const { isTotal } = this.state
    if (!isTotal) {
      // 获取质保列表
      this.getOrderWarranty()
    }
  }

  //跳转详情
  goDetail(val) {
    Taro.navigateTo({
      url: '/pages/warranty/detail/index?val=' + JSON.stringify(val)
    })
  }

  render() {
    const { list } = this.state;
    return (
      <View className="body" >
        <View className="head">
          <AtIcon className="head-icon" value='alert-circle' size='18' color='#FF7026'></AtIcon>
          <View className="head-text">以下服务享受门店提供的质保</View>
        </View>
        <View className="list">
          {
            list && list.length > 0 && list.map((val) => {
              return (
                <View className="detail" onClick={() => { this.goDetail(val) }} key={val.id}>
                  <View className="detail-head">
                    <View className="detail-head-title">{val.goodsName}</View>
                    <View className="detail-head-quantity">x{val.goodsNumber}</View>
                  </View>
                  <View className="detail-main">
                    服务方案：
                  <Text className="detail-main-text">{val.orderNumber}</Text>
                  </View>
                  <View className="detail-main">
                    施工日期：
                  <Text className="detail-main-text">{this.dateFormat(val.finishOrderAt)}</Text>
                  </View>
                  <View className="detail-main">
                    服务车辆：
                    <Text className="detail-main-text">{val.carLicense}</Text>
                  </View>
                  <View className="detail-main">
                    施工门店：
                  <Text className="detail-main-text">{val.storeName}</Text>
                  </View>
                  {
                    // 施工日期和质保有效期相同不显示
                    val.finishOrderAt &&  val.warrantyValidAt && (val.finishOrderAt != val.warrantyValidAt) && (
                    <View className="detail-main">
                    质保有效期：
                  <Text className="detail-main-text">{this.dateFormat(val.warrantyValidAt)}</Text>
                  </View>
                    )
                  }
                  {
                    val.distance && val.distance > 0 ?(
                    <View className="detail-main">
                      质保里程数：
                    <Text className="detail-main-text">{val.distance}公里</Text>
                    </View>
                    ) : null
                  }
                </View>
              )
            })
          }

        </View>
        <View className="bottom">
          我是有底线的~
        </View>
      </View>
    )
  }
}
